<template>
  <div>
    <div class="header-bar">
      <span class="icon icon-back"></span>
      <h3>注册</h3>
      <!-- <a href="javascript:;">登录</a> -->
      <router-link to="login">登录</router-link>
    </div>

    <form class="content">
      <div class="item">
        <label for="phone">手机号</label>
        <input v-model="phone" type="text" name="phone" />
      </div>
      <div class="item">
        <label for="psw">密码</label>
        <input v-model="psw" type="password" name="psw" />
      </div>
      <div class="item">
        <label for="code">验证码</label>
        <input v-model="code" type="text" name="code" />
        <a class="get-code" href="javascript:;">点击获取</a>
      </div>
      <div class="next">
        <input class="submit" @click.prevent="submitFn()" type="submit" value="下一步">
      </div>
      <div class="reade">
        <label>
          <input type="checkbox" v-model="check">
          <span>我已阅读并同意使用</span>
          <a href="javascript:">条款和隐私政策</a>
        </label>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "RegisterPage",
  data() {
    return {
      phone: "",
      psw: "",
      code: "",
      check: "",
      url: "/api/register"
    };
  },
  methods: {
    submitFn() {
      let regu = /^1[345678]\d{9}$/;
      let regp = /^[\w]{6,16}$/;
      if (!this.phone) {
        alert("手机号不能为空！");
        return false;
      } else if (!regu.test(this.phone)) {
        alert("手机号格式不正确！");
        return false;
      }
      if (!this.psw) {
        alert("密码不能为空！");
        return false;
      } else if (!regp.test(this.psw)) {
        alert("密码格式不正确，要求6-16位");
        return false;
      }
      if (!this.code) {
        alert("验证码不能为空！");
        return false;
      }
      if (!this.check) {
        alert("请勾选《条款和隐私政策》");
        return false;
      }
      this.axios
        .post(this.url, {
          phone: this.phone,
          password: this.psw
        })
        .then(res => {
          alert(res.data.msg);
          if (res.data.status === 1) {
            this.$router.push({ path: "/login" });
          }
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "../style/loginAndRegister.less";
</style>